<template>
	<view class="u-page">
		<!-- 所有内容的容器 -->
		<view class="title"><text class="title_child">卫生管理监督系统</text></view>
		<!-- 登录表单 -->
		<u-form :model="form" ref="uForm" label-width="120rpx" label-align="center">
			<u-form-item label="学号" prop="student_id" borderBottom>
				<u--input v-model="form.student_id" :focus="true" :clearable="false" placeholder="请输入学号" maxlength="10"
					type="number" border="none"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="oldPassword" borderBottom>
				<u--input v-model="form.oldPassword" placeholder="请输入密码" :password-icon="false"
					maxlength="10" type="text" password border="none"></u--input>
			</u-form-item>
			<u-form-item label="新密码" prop="newPassword" borderBottom>
				<u--input v-model="form.newPassword" placeholder="请输入密码" :password-icon="false"
					maxlength="10" type="text" password border="none"></u--input>
			</u-form-item>
		</u-form>
		<view class="btn">
			<view class="btn_1">
				<u-button type="primary" @click="submit" shape="circle" size="normal" text="确定"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					student_id: '',
					oldPassword: '',
					newPassword: ''
				},
				rules: {
					student_id: [{
							required: true,
							message: '请输入学号',
							min: 10,
							max: 10,
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^[12][0-9]{7}[0-6][0-9]$/,
							message: '该学号不存在',
							trigger: 'blur',
						}
					],
					oldPassword: [{
							required: true,
							min: 6,
							max: 10,
							message: '请输入密码,6-10位',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^[A-Za-z0-9]+$/,
							message: '密码只能为数字或字母',
							trigger: 'blur'
						}
					],
					newPassword: [{
							required: true,
							min: 6,
							max: 10,
							message: '请输入新密码,6-10位',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^[A-Za-z0-9]+$/,
							message: '密码只能为数字或字母',
							trigger: 'blur'
						}
					],
				},
			}
		},
		methods: {
			// 修改密码方法
			submit() {
				// validate 对整个表单进行校验的方法
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 前端校验成功
						// 调用后台接口检验学号是否存在，存在，则进行修改
						// 不存在，则提示该用户不存在
					} else {
						// 前端校验失败
						this.$refs.uToast.show({
							title: "格式错误",
							type: 'error',
							position: 'top',
						})
					}
				});
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// setRules 调用此方法，设置校验规则
			this.$refs.uForm.setRules(this.rules);
		},
	}
</script>

<style>
	.u-page {
		margin: 0;
		padding: 0;
		height: 100vh;
		background-image: linear-gradient(to bottom right,  #7A88FF, #7AFFAF);
		font-size: 60rpx;
	}

	.title {
		width: 100%;
		height: 400rpx;
		text-align: center;
		margin-bottom: 50rpx;
	}

	.title_child {
		display: inline-block;
		height: 80rpx;
		line-height: 400rpx;
		width: 480rpx;
		font-size: 60rpx;
	}
	/* 表单区域 */
	.u-form {
		width: 70%;
		margin: 0 15%;
	}

	.u-form-item {
		background-color: #fff;
		border-radius: 60rpx;
		margin-bottom: 20rpx;
	}

	/* 按钮区域 */
	.btn {
		display: flex;
		justify-content: center;
	}

	.btn_1 {
		height: 160rpx;
		width: 240rpx;
		padding: 30rpx;
	}

	.u-form-item--left__content__label {
		padding-left: 20rpx;
	}
</style>
